<template>
	<view class="template">
		<!-- <view class="text-area">
			<view style="margin-top: 150upx;margin-bottom: 100upx;">
				<text class="title">我的模板</text>
			</view>
		</view> -->

		<view v-if="!myTplList.length" class="empty">当前还没有个人模板</view>
		<view v-else>
			<view style="font-size: 18px;">我的模板列表：</view>
			<view class="tplList"
				v-for="(myTplListVal, myTplListIdx) in myTplList"
				:key="myTplListIdx">
				<navigator :url="'../template/tpl_review?tpl_id='+myTplListVal._id">{{myTplListVal.name}}</navigator>
				<button class="mini" @click="deleteTpl(myTplListVal.my_tpl_id,myTplListIdx)">删除</button>
			</view>
		</view>

		<view class="buttonTpl">
			<navigator url="../template/tpl_pub_list" class="linkBtn">公共模板列表</navigator>
		</view>
		<!-- <view class="buttonTpl">
			<button class="linkBtn" @click="importTpl">导入模板</button>
		</view> -->
		<!-- <view >
			<view>导入模板：</view>
			<view ref="input" class="input">
			</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAddMember: false,
				myTplList: []
			};
		},
		mounted() {
            // var input = document.createElement('input')
            // input.type = 'file'
            // input.onchange = (event) => {
            //     console.log(event)
            // }
            // this.$refs.input.$el.appendChild(input)
        },
		created() {
			this.getMyTplList();
		},
		methods: {
			getMyTplList() {
				let account_id = uni.getStorageSync("uid");

				uniCloud.callFunction({
					name: "ha_get_my_tpl",
					data: {
						account_id
					},
					success: ({result}) => {
						// console.log(result)

						this.myTplList = result;
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			// importTpl() {
			// },
			deleteTpl(my_tpl_id,index) {
				uni.showModal({ content: '确认删除吗？', success: (res) => { if (res.confirm) {
					// console.log(my_tpl_id);
					let account_id = uni.getStorageSync("uid");

					uniCloud.callFunction({
						name: "ha_del_my_tpl",
						data: {
							account_id,
							my_tpl_id
						},
						success: ({result}) => {
							// console.log(result);
							
							if ( result.status === 0 ) {
								uni.showToast({
									title: `${result.msg || "删除成功！"}`,
									duration: 1000
								});
								// location.reload();
								this.myTplList.splice(index, 1);
							} else if (result.status === -1) {
								uni.showToast({
									icon: "none",
									title: `${result.msg || "网络异常，请稍后重试！"}`,
									duration: 1000,
									success() {
										uni.redirectTo({
											url: "/pages/user/user_login"
										})
									}
								});
							} else {
								uni.showToast({
									icon: 'none',
									title: `${result.msg || "网络异常，请稍后重试！"}`,
									duration: 1000
								});
							}
						},
						fail() {
							uni.showToast({
								icon: 'none',
								title: '网络异常，请稍后重试！'
							});
						}
					});
				}}});
			}
		}
	}
</script>

<style lang="less">
	uni-page-body {
		height: 100%;
	}

	.template {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.tpl__btn {
		background-color: #007aff;
		color: #fff;
		width: 100%;
		// position: fixed;
		left: 0;
		bottom: 0;
	}

	.empty {
		width: 100%;
		color: #666666;
		position: absolute;
		left: 50%;
		bottom: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
	}

	.tplList {
		justify-content: space-between;
		width: 90%;
		display: flex;
		margin: 10rpx 0;
	}

	.tplList navigator {
		margin-left: 20rpx;
	}

	.tplList button {
		margin-right: 10rpx;
	}

	.buttonTpl {
		width: 100%;
		margin-bottom: 40upx;
	}

	.buttonTpl .linkBtn {
		font-size: 30upx;
		display: block;
		line-height: 80upx;
		margin: 0 auto;
		width: 90%;
		text-align: center;
		margin-bottom: 20upx;
		border-radius: 40upx;
		box-shadow: 0 3px 5px rgba(5, 26, 180, 0.35);
		font-weight: bold;
		background: linear-gradient(135deg, #576fec 0%, #576fec 76%, #536dec 76%);
		color: #fff;
	}

</style>
